<template>
    <div v-for="item in list" :key="item.id">
        id is: {{ item.id }} --- item is: {{ item.direction }}
    </div>
</template>

<script setup>
import { reactive } from 'vue';
const list = reactive([
    {id: 1, direction: 'East'}, {id: 2, direction: 'West'},
    {id: 3, direction: 'South'}, {id: 4, direction: 'North'}
])
</script>